<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/src/css/swiper/animate.min.css">
</head>
<style>
    .swiper {
        width: 600px;
        height: 300px;
        margin: 20px auto;
    }

    .swiper-slide p {
        font-size: 50px;
        text-align: center;
    }

    .swiper-slide >img { 
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .slide1 {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .slide1-img {
        width: 70%;
        height: 100%;
        object-fit: cover;
    }

    .slide1 .slide1-p {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        color: #000;
        font-size: 30px;
    }

    
</style>

<body>
    <script src="/src/js/swiper-bundle.min.js"></script>
    <script src="/src/js/swiper.animate1.0.3.min.js"></script>

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="slide1">
                    <img src="/src/img/grid/01.png" class="slide1-img ani" swiper-animate-effect="rotateIn"
                        swiper-animate-duration="1s">
                    <p class="slide1-p ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"
                        swiper-animate-delay="0.3s">我是图片上面的内容</p>
                </div>
            </div>
            <div class="swiper-slide">
                <p class="ani" swiper-animate-effect="fadeInLeft">
                    左边出来的文字哈哈!!
                </p>

                <p class="ani" swiper-animate-effect="fadeInRight">
                    右边出来的文字哈哈!!!
                </p>
            </div>
            <div class="swiper-slide">
                <img src="/src/img/grid/02.png" class="ani" swiper-animate-effect="rollIn">
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        })      
    </script>
</body>

</html>